JavaScript-dekoratorer: Metadataprogrammering og AOP-mønstre

JavaScript-dekoratorer er en kraftig og uttrykksfull metaprogrammeringsfunksjon som lar deg endre eller forbedre oppførselen til klasser, metoder, egenskaper og parametere på en deklarativ og gjenbrukbar måte. De gir en konsis syntaks for å legge til metadata og implementere aspektorienterte programmeringsprinsipper (AOP), noe som forbedrer kodegjenbrukbarhet, lesbarhet og vedlikehold. Denne omfattende guiden vil utforske JavaScript-dekoratorer i detalj, og dekke deres syntaks, bruk og applikasjoner i ulike scenarier. Selv om det offisielt er et forslag som fortsatt utvikles, er dekoratorer mye brukt, spesielt i rammeverk som Angular og NestJS, og deres innvirkning på JavaScript-utvikling er ubestridelig.

Hva er JavaScript-dekoratorer?

Dekoratorer er en spesiell type deklarasjon som kan knyttes til en klassedeklarasjon, metode, aksessor, egenskap eller parameter. De bruker formen @expression, hvor expression må evalueres til en funksjon som vil bli kalt under kjøring med informasjon om den dekorerte deklarasjonen. I hovedsak fungerer dekoratorer som funksjoner som pakker inn eller endrer det dekorerte elementet, slik at du kan legge til ekstra funksjonalitet eller metadata uten å direkte endre den originale koden.

Tenk på dekoratorer som annotasjoner eller markører som kan knyttes til kodeelementer. Disse markørene kan deretter behandles under kjøring for å utføre ulike oppgaver, som logging, validering, autorisering eller avhengighetsinjeksjon. Dekoratorer fremmer en renere og mer modulær kodestruktur ved å skille bekymringer og redusere kjedelig standardkode.

Fordeler med å bruke dekoratorer

• Forbedret kodegjenbrukbarhet: Dekoratorer lar deg innkapsle felles oppførsel i gjenbrukbare komponenter som kan brukes på flere deler av applikasjonen din. Dette reduserer kodeduplisering og fremmer konsistens.
• Forbedret lesbarhet: Ved å skille tverrgående bekymringer inn i dekoratorer, kan du gjøre kjerne-logikken din renere og lettere å forstå. Dekoratorer gir en deklarativ måte å uttrykke tilleggsfunksjonalitet på, noe som gjør koden mer selv-dokumenterende.
• Økt vedlikeholdbarhet: Dekoratorer fremmer modularitet og separasjon av bekymringer, noe som gjør det enklere å endre eller utvide applikasjonen din uten å påvirke andre deler av kodebasen. Dette reduserer risikoen for å introdusere feil og forenkler vedlikeholdsprosessen.
• Aspektorientert programmering (AOP): Dekoratorer gjør det mulig å implementere AOP-prinsipper ved å tillate deg å injisere oppførsel i eksisterende kode uten å endre kildekoden. Dette er spesielt nyttig for å håndtere tverrgående bekymringer som logging, sikkerhet og transaksjonsstyring.

Dekoratortyper

JavaScript-dekoratorer kan brukes på forskjellige typer deklarasjoner, hver med sitt eget spesifikke formål og syntaks:

Klassedekoratorer

Klassedekoratorer brukes på klassens konstruktør og kan brukes til å endre klassedefinisjonen eller legge til metadata. En klassedekorator mottar klassens konstruktør som sitt eneste argument.

Eksempel: Legge til metadata i en klasse.

            
function Component(options: { selector: string, template: string }) {
  return function (constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: '
Hello
' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Output: my-component

            

              
                Copy
              
            
          

I dette eksemplet legger Component-dekoratoren til selector- og template-egenskaper til MyComponent-klassen, slik at du kan konfigurere komponentens metadata på en deklarativ måte. Dette ligner på hvordan Angular-komponenter er definert.

Metodedekoratorer

Metodedekoratorer brukes på metoder innenfor en klasse og kan brukes til å endre metodens oppførsel eller legge til metadata. En metodedekorator mottar tre argumenter:

• Målobjektet (enten klasseprototypen eller klassekonstruktøren, avhengig av om metoden er statisk).
• Navnet på metoden.
• Egenskapsdeskriptoren for metoden.

Eksempel: Logging av metodekall.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                     //         add returned: 5

            

              
                Copy
              
            
          

I dette eksemplet logger Log-dekoratoren metodekallet og dets argumenter før den originale metoden utføres, og logger returverdien etter utførelse. Dette er et enkelt eksempel på hvordan dekoratorer kan brukes til å implementere loggføring eller revisjonsfunksjonalitet uten å endre kjerne-logikken i metoden.

Egenskapsdekoratorer

Egenskapsdekoratorer brukes på egenskaper innenfor en klasse og kan brukes til å endre egenskapens oppførsel eller legge til metadata. En egenskapsdekorator mottar to argumenter:

• Målobjektet (enten klasseprototypen eller klassekonstruktøren, avhengig av om egenskapen er statisk).
• Navnet på egenskapen.

Eksempel: Validering av egenskapsverdier.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Invalid value for ${propertyKey}. Must be a non-negative number.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Output: 10

try {
  product.price = -5; // Throws an error
} catch (e) {
  console.error(e.message);
}

            

              
                Copy
              
            
          

I dette eksemplet validerer Validate-dekoratoren price-egenskapen for å sikre at den er et ikke-negativt tall. Hvis en ugyldig verdi tilordnes, kastes en feil. Dette er et enkelt eksempel på hvordan dekoratorer kan brukes til å implementere datavalidering.

Parameterdekoratorer

Parameterdekoratorer brukes på parametere i en metode og kan brukes til å legge til metadata eller endre parameterens oppførsel. En parameterdekorator mottar tre argumenter:

• Målobjektet (enten klasseprototypen eller klassekonstruktøren, avhengig av om metoden er statisk).
• Navnet på metoden.
• Indeksen for parameteret i metodens parameterliste.

Eksempel: Injisering av avhengigheter.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hello, ${name}!`);
    }
}

// Simple dependency injection container
class Container {
    private dependencies: Map = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve(Greeter);
greeter.greet('World'); // Output: Logger: Hello, World!

            

              
                Copy
              
            
          

I dette eksemplet brukes Inject-dekoratoren til å injisere avhengigheter i konstruktøren til Greeter-klassen. Dekoratoren assosierer et token med parameteret, som deretter kan brukes til å løse avhengigheten ved hjelp av en avhengighetsinjeksjonsbeholder. Dette eksemplet viser en grunnleggende implementering av avhengighetsinjeksjon ved hjelp av dekoratorer og reflect-metadata-biblioteket.

Praktiske eksempler og bruksområder

JavaScript-dekoratorer kan brukes i en rekke scenarier for å forbedre kodekvalitet og forenkle utvikling. Her er noen praktiske eksempler og bruksområder:

Logging og revisjon

Dekoratorer kan brukes til å automatisk logge metodekall, argumenter og returverdier, noe som gir verdifull innsikt i applikasjonens oppførsel og ytelse. Dette kan være spesielt nyttig for feilsøking og problemløsning.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] Method ${propertyKey} returned: ${result}. Execution time: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simulate a time-consuming operation
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

            

              
                Copy
              
            
          

Dette utvidede eksemplet måler utførelsestiden for metoden og logger den, sammen med gjeldende tidsstempel, noe som gir mer detaljert informasjon for ytelsesanalyse.

Autorisasjon og autentisering

Dekoratorer kan brukes til å håndheve sikkerhetspolicyer ved å sjekke brukerroller og tillatelser før en metode utføres. Dette kan forhindre uautorisert tilgang til sensitive data og funksjonalitet.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Function to retrieve the current user's role

            if (userRole !== role) {
                throw new Error(`Unauthorized: User does not have the required role (${role}) to access this method.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // In a real application, this would retrieve the user's role from authentication context
    return 'admin'; // Example: Hardcoded role for demonstration
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted successfully.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Article ${articleId} edited successfully.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // This will throw an error because the user role is 'admin'
} catch (error) {
    console.error(error.message);
}

            

              
                Copy
              
            
          

I dette utvidede eksemplet sjekker Authorize-dekoratoren om den nåværende brukeren har den spesifiserte rollen før den tillater tilgang til metoden. Funksjonen getCurrentUserRole (som ville hente den faktiske brukerrollen i en ekte applikasjon) er used to determine the user's current role. If the user doesn't have the required role, an error is thrown, preventing the method from being executed.

Mellomlagring (Caching)

Dekoratorer kan brukes til å mellomlagre (cache) resultatene av kostbare operasjoner, noe som forbedrer applikasjonsytelsen og reduserer serverbelastningen. Dette kan være spesielt nyttig for ofte tilgjengelige data som ikke endres ofte.

            
function Cache(ttl: number = 60) { // ttl in seconds, default to 60 seconds
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Retrieving from cache: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Executing and caching: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Calculate expiry time
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Cache for 120 seconds
    async fetchData(id: number): Promise {
        // Simulate fetching data from a database or API
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Data for ID ${id} fetched from source.`);
            }, 1000); // Simulate a 1-second delay
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Executes the method
    console.log(await dataService.fetchData(1)); // Retrieves from cache
    await new Promise(resolve => setTimeout(resolve, 121000)); // Wait for 121 seconds to allow the cache to expire
    console.log(await dataService.fetchData(1)); // Executes the method again after cache expiry
})();

            

              
                Copy
              
            
          

Dette utvidede eksemplet implementerer en grunnleggende mellomlagringsmekanisme (caching) ved hjelp av en Map. Cache-dekoratoren lagrer resultatene av den dekorerte metoden for en spesifisert tid-til-leve (TTL). Når metoden kalles igjen med de samme argumentene, returneres det mellomlagrede resultatet i stedet for å utføre metoden på nytt. Etter at TTL utløper, utføres metoden igjen, og resultatet mellomlagres.

Validering

Dekoratorer kan brukes til å validere data før de behandles, noe som sikrer dataintegritet og forhindrer feil. Dette kan være spesielt nyttig for å validere brukerinput eller data mottatt fra eksterne kilder.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Missing required field: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Valid user created:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Missing email
} catch (error) {
    console.error('Validation error:', error.message);
}


            

              
                Copy
              
            
          

Dette eksemplet bruker to dekoratorer: Required og ValidateClass. Required-dekoratoren markerer egenskaper som påkrevde. ValidateClass-dekoratoren fanger opp klassekonstruktøren og sjekker om alle påkrevde felt har verdier. Hvis et påkrevd felt mangler, kastes en feil.

Avhengighetsinjeksjon

Som vist i eksemplet med parameterdekoratorer, kan dekoratorer lette grunnleggende avhengighetsinjeksjon, noe som gjør det enklere å administrere avhengigheter og frikoble komponenter. Mens mer sofistikerte rammeverk for avhengighetsinjeksjon eksisterer, kan dekoratorer gi en lettvektig og praktisk måte å håndtere enkle avhengighetsinjeksjonsscenarier på.

Betraktninger og beste praksis

• Forstå utførelseskonteksten: Vær oppmerksom på argumentene target, propertyKey og descriptor som sendes til dekoratorfunksjonen. Disse argumentene gir verdifull informasjon om den dekorerte deklarasjonen og lar deg endre dens oppførsel deretter.
• Bruk dekoratorer sparsomt: Selv om dekoratorer kan være kraftige, kan overforbruk føre til kompleks og vanskelig å forstå kode. Bruk dekoratorer med omhu og bare når de gir en klar fordel med hensyn til kodegjenbrukbarhet, lesbarhet eller vedlikehold.
• Følg navnekonvensjoner: Bruk beskrivende navn for dekoratorene dine for å tydelig indikere deres formål. Dette vil gjøre koden din mer selv-dokumenterende og lettere å forstå.
• Oppretthold skille mellom bekymringer: Dekoratorer bør fokusere på spesifikke tverrgående bekymringer og unngå å blande urelatert funksjonalitet. Dette vil forbedre modulariteten og vedlikeholdbarheten til koden din.
• Test dekoratorene dine grundig: Som all annen kode bør dekoratorer testes grundig for å sikre at de fungerer korrekt og ikke introduserer utilsiktede bivirkninger.
• Vær oppmerksom på bivirkninger: Dekoratorer utføres under kjøring. Unngå komplekse eller langvarige operasjoner i dekoratorfunksjoner, da dette kan påvirke applikasjonens ytelse.
• TypeScript anbefales: Selv om JavaScript-dekoratorer teknisk sett kan brukes i vanlig JavaScript med Babel-transpilering, brukes de oftest med TypeScript. TypeScript gir utmerket typesikkerhet og design-time-kontroll for dekoratorer.

Globale perspektiver og eksempler

Prinsippene for kodegjenbrukbarhet, vedlikeholdbarhet og separasjon av bekymringer, som dekoratorer legger til rette for, er universelt anvendelige på tvers av ulike programvareutviklingskontekster globalt. Imidlertid kan spesifikke implementeringer og bruksområder variere avhengig av teknologistakken, prosjektkrav og utviklingspraksis som er utbredt i forskjellige regioner.

For eksempel, i virksomhets-Java-utvikling, brukes annotasjoner (likt i konsept med dekoratorer) mye for konfigurasjon og avhengighetsinjeksjon (f.eks. Spring Framework). Mens syntaksen og de underliggende mekanismene skiller seg fra JavaScript-dekoratorer, forblir de underliggende prinsippene for metaprogrammering og AOP de samme. På samme måte, i Python, er dekoratorer en førsteklasses språkfunksjon og brukes ofte til oppgaver som logging, autentisering og mellomlagring.

Når du jobber i internasjonale team eller bidrar til åpen kildekode-prosjekter med et globalt publikum, er det viktig å følge kodestandarder og beste praksis som fremmer klarhet og vedlikeholdbarhet. Å bruke dekoratorer effektivt kan bidra til en mer modulær og velstrukturert kodebase, noe som gjør det enklere for utviklere med ulik bakgrunn å samarbeide og bidra.

Konklusjon

JavaScript-dekoratorer er en kraftig og allsidig metaprogrammeringsfunksjon som betydelig kan forbedre kodegjenbrukbarhet, lesbarhet og vedlikehold. Ved å tilby en deklarativ måte å legge til metadata og implementere AOP-prinsipper, gjør dekoratorer det mulig å innkapsle felles oppførsel, skille bekymringer og lage mer modulære og velstrukturerte applikasjoner. Selv om det fortsatt er et forslag under aktiv utvikling, har dekoratorer allerede funnet utbredt anvendelse i rammeverk som Angular og NestJS og er i ferd med å bli en stadig viktigere del av JavaScript-økosystemet. Ved å forstå syntaksen, bruken og beste praksis for dekoratorer, kan du utnytte deres kraft til å bygge mer robuste, skalerbare og vedlikeholdbare applikasjoner.

Ettersom JavaScript-økosystemet fortsetter å utvikle seg, er det avgjørende å holde seg oppdatert på nye funksjoner og beste praksis for å bygge programvare av høy kvalitet som møter behovene til brukere over hele verden. Å mestre JavaScript-dekoratorer er en verdifull ferdighet som kan hjelpe deg å bli en mer effektiv og produktiv utvikler.